<template>
  <div class="content-item">
    <!-- 标题 -->
    <h2 class="content-title">{{ title }}</h2>
    <!-- 地址和看过的人数 -->
    <div class="address-view">
      <div class="address">
        <span class="address-icon">
          <svg width="15px" height="15px" viewBox="0 0 15 15" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
            <g id="icon_address" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
              <g id="Group-2">
                <rect id="Rectangle-4" x="0" y="0" width="15" height="15"></rect>
                <path
                  fill="#FF7019"
                  d="M11.742942,9.58109678 C11.5940786,9.73753343 8.07057715,13.7052194 8.07057715,13.7052194 C7.92289672,13.879008 7.76116032,14 7.58611019,14 C7.41099048,14 7.27896645,13.8645293 7.14478531,13.7052194 C7.14478531,13.7052194 3.17126097,9.50156528 3.10392686,9.41036108 C3.03652316,9.31908953 2.94446354,9.20299104 2.87054214,9.08321117 C2.34710815,8.27072379 2,7.34081353 2,6.31332397 C2,3.37873945 4.46236877,1 7.49994201,1 C10.5374689,1 13,3.37873945 13,6.31332397 C13,7.37300325 12.6746252,8.35734871 12.1201336,9.18545954 C11.9680926,9.37879989 11.8241233,9.50288968 11.742942,9.58109678 Z M7.46849734,4.59473031 C6.4618243,4.59473031 5.6456777,5.39971391 5.6456777,6.39232326 C5.6456777,7.38447703 6.46197804,8.18946063 7.46849734,8.18946063 C8.47520882,8.18946063 9.29135541,7.38447703 9.29135541,6.39232326 C9.29135541,5.39956205 8.47520882,4.59473031 7.46849734,4.59473031 Z"
                  id="iconfont-fujin"
                ></path>
              </g>
            </g>
          </svg>
        </span>
        <span class="address-info">{{ address }}</span>
      </div>
      <div class="view-count">
        <span class="view-icon">
          <svg width="15px" height="15px" viewBox="0 0 15 15" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
            <g id="icon_view" stroke="none" stroke-width="1" fill="#FF7019" fill-rule="evenodd">
              <g id="icon/read_white_filled" transform="translate(0.000000, 3.000000)" fill="#FF7019">
                <g id="Group-5" transform="translate(0.500000, 0.000000)">
                  <path d="M7,6.55952381 C7.88639192,6.55952381 8.63333333,5.76304036 8.63333333,4.75 C8.63333333,3.73695964 7.88639192,2.94047619 7,2.94047619 C6.11360808,2.94047619 5.36666667,3.73695964 5.36666667,4.75 C5.36666667,5.76304036 6.11360808,6.55952381 7,6.55952381 Z" id="Path"></path>
                  <path
                    d="M7,0 C10.8659932,0 14,2.87617674 14,4.75 C14,6.62382326 10.8659932,9.5 7,9.5 C3.13400675,9.5 0,6.62382326 0,4.75 C0,2.87617674 3.13400675,0 7,0 Z M7,1.58333333 C5.30906308,1.58333333 3.96666667,3.01476625 3.96666667,4.75 C3.96666667,6.48523375 5.30906308,7.91666667 7,7.91666667 C8.69093692,7.91666667 10.0333333,6.48523375 10.0333333,4.75 C10.0333333,3.01476625 8.69093692,1.58333333 7,1.58333333 Z"
                    id="Combined-Shape"
                  ></path>
                </g>
              </g>
            </g>
          </svg>
        </span>
        <span class="count">{{ view_count }}</span>
      </div>
    </div>
    <!-- 相关信息 -->
    <left-img :feed_id="feed_id" :desc="desc" :desc_title="desc_title" :img_url="img_url" :plus_price="plus_price" :price="price" :price_suffix="price_suffix" v-if="Math.floor(index / 3) % 2 == 0"></left-img>

    <right-img :feed_id="feed_id" :desc="desc" :desc_title="desc_title" :img_url="img_url" :plus_price="plus_price" :price="price" :price_suffix="price_suffix" v-else></right-img>
  </div>
</template>

<script>
import LeftImg from './LeftImg.vue'
import RightImg from './RightImg.vue'
export default {
  props: {
    feed_id: Number,
    index: Number,
    title: String,
    address: String,
    view_count: String,
    img_url: String,
    desc_title: String,
    desc: Array,
    price: String,
    plus_price: String,
    price_suffix: String
  },
  components: {
    LeftImg,
    RightImg
  }
}
</script>

<style lang="less" scoped>
.content-item {
  margin-top: 15px;
  border-bottom: 1px solid #aaa;

  .content-title {
    padding: 10px 0;
    font-size: 16px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .address-view {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;

    .address,
    .view-count {
      display: flex;
      align-items: center;

      .address-icon,
      .view-icon {
        margin-right: 5px;
        display: flex;
        align-items: flex-end;
      }

      .address-info,
      .count {
        font-size: 13px;
        color: #777;
        font-weight: 600;
      }
    }
  }
}
</style>
